<template>
  <v-app>
    <v-main>
      <transition name="slide-fade">
        <router-view />
      </transition>
      <div v-if="this.$store.state.loading"
           class="loading">
        <v-progress-circular indeterminate
                             color="primary"
                             class="block-center" />
      </div>
    </v-main>
  </v-app>
</template>

<script>
import util from './assets/js/util'

export default {
  name: 'App',

  data () {
    return {
      loading: false
    }
  },
  mounted () {
    // window.onpopstate = () => {
    //   if (!this.$store.state.allowBack) {
    //     //    这个allowBack 是存在vuex里面的变量
    //     history.go(1)
    //   }
    // }
    this.appInit()
    util.fixIOSKeyboardBug()
  },
  methods: {
    getTokenCb (init) {
      this.Service.getToken(init.openid, (res) => {
        if (this.localData.isExits('init')) {
          const init = JSON.parse(window.localStorage.init)
          this.$store.state.server_openid = init.openid
          this.loading = false
        }
      })
    },
    appInit () {
      const goAuth = () => {
        const href = window.location.href
        // window.location.replace(window.location.origin + '/auth/wechat?to_url=' + href + '&type=avatar')
      }
      if (GetQueryString('openid') && GetQueryString('unionid') && GetQueryString('avatar') && GetQueryString('nickname')) {
        const init = {
          //= ======uid======
          openid: GetQueryString('openid'),
          unionid: GetQueryString('unionid'),
          userInfo: {
            avatar: GetQueryString('avatar'),
            nickName: GetQueryString('nickname')
          }
        }
        localStorage.init = JSON.stringify(init)
        this.$store.state.openid = GetQueryString('openid')
        this.$store.state.unionid = GetQueryString('unionid')
        this.$store.state.userInfo = {
          avatar: GetQueryString('avatar'),
          nickName: GetQueryString('nickname')
        }
        // location.href = window.location.href.substr(0, window.location.href.indexOf('?'))
      } else if (this.localData.isExits('init')) {
        const init = JSON.parse(localStorage.init)
        this.$store.state.openid = init.openid
        this.$store.state.unionid = init.unionid
        this.$store.state.userInfo = {
          avatar: init.userInfo.avatar,
          nickName: init.userInfo.nickName
        }
        if (!init.openid || !init.unionid || !init.userInfo.nickName || !init.userInfo.avatar) {
          goAuth()
        }
      } else {
        const test = true
        if (test) {
          const init = {
            //= ======uid======
            openid: 'o_epz08as736cjyk-cnDe7dCOydA',
            unionid: 'o_epz08as736cjyk-cnDe7dCOydA',
            userInfo: {
              avatar: 'https://thirdwx.qlogo.cn/mmopen/vi_32/3aybvew99NOMgTm4bxicbqtsYkJdpFVMZoJlJUlQXVE4gSLiaFcV6N5WXOfGgY39Bnda8vIapCzOvDQDFUFrukuA/132',
              nickName: '测试'
            }
          }
          localStorage.init = JSON.stringify(init)
        } else {
          goAuth()
        }
      }

      function GetQueryString (key) {
        const reg = new RegExp('(^|&)' + key + '=([^&]*)(&|$)')
        const result = window.location.search.substr(1).match(reg)
        return result ? decodeURIComponent(result[2]) : false
      }
    }

  }
}
</script>

<style lang="scss">
@import '../node_modules/reset-css/reset.css';
@import '../node_modules/mint-ui/lib/style.css';
@import './assets/css/base.scss';

div.theme--light.v-application {
  background: transparent;
  color: #000000;
}

/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all 0.3s ease;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */
 {
  transform: translateX(10px);
  opacity: 0;
}

#app {
  max-width: 750px;
  overflow-x: hidden;
  margin: 0 auto;
  height: 100vh;
}

.loading {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 999;
}
</style>
